<!doctype html>
<html>
<head>
<link href="/css/css.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<script src="/js/jquery.js"></script>
<title>无标题文档</title>
<style>
/*搜索框*/
.header input{ width:85%; height:33px; float:right; margin-right:4%; border-radius:3px; background-color:#fff; margin-top:6px; padding-left:38px; box-sizing:border-box; background-image:url(images/search.png); background-size:12px auto; background-repeat:no-repeat; background-position:14px center; color:#191919; font-size:14px; padding-right:16px;}
/*搜索出的地址*/
.search_addr{ height:46px; background-color:#fff; position:relative; padding-left:4%; padding-top:6px; box-sizing:border-box;}
.search_addr h1{ color:#191919; font-size:14px; line-height:17px;}
.search_addr p{ color:#65646b; font-size:12px; line-height:16px;}
/*****常见问题********/
.query{ position:fixed; bottom:0px; width:100%; text-align:center;}
.query p{ font-size:16px; margin:auto; margin-bottom:20px; position:relative; width:169px;}
.query img{ width:22px; height:auto; display:inline; position:absolute; top:0px; left:0px;}
/*****常见问题:弹出层********/
.query_box{ width:100%; height:280px; background:#fff; position:fixed; left:0; bottom:0; z-index:2000; text-align:center; }
.query_box .backtrack{ height:40px; line-height:40px; font-size:20px; color:#65646C; padding-left:4%; text-align:left; position:relative; }
.query_box p{ font-size:15px; color:#65646A; width:244px; text-align:center; margin:auto; margin-top:16px; margin-top:16px; }
.query_box input{ border:1px #cccccc solid; color:#65646A; font-size:16px; width:60%; border-radius:3px; height:33px; margin-top:16px; padding-left:8px;}
.query_box h3{ color:#02AFF3; font-size:18px; border-bottom:2px solid #02AFF3; width:104px; margin:auto;}
.query_box button{ width:92%; height:36px; background:#FF7F00; border-radius:3px; margin-top:20px; color:#fff; font-size:18px;}
/*****常见问题:弹出层~~提交成功********/
.succeed{ width:100%; height:100%; position:fixed; background:#7C7C7C; z-index:3000; top:0px; left:0px; }
.succeed h3{ width:92%; height:36px; background:#fff; font-size:18px; text-align:center; line-height:35px; position:fixed;top:50%; left:4%; color:#191919;border-radius:3px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header" style="margin-bottom:14px;">
	<div class="header_left" onclick="window.history.go(-1)"><img src="/images/return.png"></div>
	<input  type="search" placeholder="搜索"></input>
</div>
<!--搜索出的地址-->
<div class="search_addr">
	<div class="border_top"></div>
	<h1>阳光花园</h1>
    <p>烟台开发区XX路XX号</p>
    <div class="border_bottom"></div>
</div>
<!--搜索出的地址-->
<div class="search_addr">
	<h1>阳光花园</h1>
    <p>烟台开发区XX路XX号</p>
    <div class="border_bottom"></div>
</div>
<!------常见问题------>
<div class="query">
	<p><img src="/images/query.jpg">常见问题请点击</p>
</div>
<!------常见问题：弹出层------>
<div class="black"></div>
<div class="query_box">
	<div class="backtrack">x
    	<div class="border_bottom"></div>
    </div>
    <p>在搜索小区出现问题时，填写你的联系方式，客服会及时与你联系。</p>
    <input type="text" placeholder="输入联系方式">
    <p>拨打客服电话</p>
    <h3>400-000-000</h3>
    <button class="btn">提交</button>
</div>
<!------常见问题：弹出层~~提交成功------>
<div class="succeed">
	<h3>提交成功，客服会及时与你联系</h3>
</div>
<script>
$(".black").hide();
$(".query_box").hide();//隐藏常见问题弹出层
$(".succeed").hide();//隐藏提交成功弹出层
$(".query").click(function(){
	$(".black").show();//显示常见问题弹出层
    $(".query_box").show();
	});
$(".backtrack").click(function(){
	$(".black").hide();//隐藏常见问题弹出层
    $(".query_box").hide();
	});	
$(".btn").click(function(){//显示常见问题弹出层
	$(".succeed").show();	
	})	
</script>
</body>
</html>

